<template>
    <h2>会员等级添加</h2>
    <table class="table table-bordered">
        <tr>
            <td>会员等级名称</td>
            <td>
                <input type="text" placeholder="请输入会员等级名称" v-model="Info.name">
            </td>
        </tr>
        <tr>
            <td>会员等级状态</td>
            <td>
                <input type="radio"  :value="true" v-model="Info.state">是
                <input type="radio"  :value="false"  v-model="Info.state">否
                
            </td>
        </tr>
        <tr>
            <td>最大成长值</td>
            <td>
                <input type="text" placeholder="请输入最大成长值" v-model="Info.maxpoint">
            </td>
        </tr>
        <tr>
            <td>最小成长值</td>
            <td>
                <input type="text" placeholder="请输入最小成长值" v-model="Info.minpoint">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input type="button" value="保存" @click="SaveData" class="btn btn-primary">
            </td>
            
        </tr>
    </table>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref} from 'vue'
import { useRouter } from 'vue-router';
//创建路由实例
const router=useRouter();
//声明响应式数据
const Info=ref({
  "name": "",
  "state": true,
  "maxpoint": "",
  "minpoint": ""
})
//声明保存数据事件
const SaveData=()=>{
    //会员等级名称不能为空
    if(Info.value.name==""){
        alert("会员等级名称不能为空")
        return;
    }
   //验证等级名称必需为中文，中文最多输入10个字符
    var reg =/[\u4e00-\u9fa5]/;
    if(!reg.test(Info.value.name)){
        alert("等级名称必需为中文")
        return
    }
    axios.post("https://localhost:44376/api/Grade/GradeAdd",Info.value)
    .then(res=>{
        if(res.data>0){
            alert("会员等级添加成功")
            router.push("/GradeShow")
        }else{
            alert("会员等级添加失败")
        }
    })
}

</script>